import React, { Component } from 'react';
import Detail from './Detail';
import {Route,Link,Switch} from 'react-router-dom';

export default  class Message extends Component {

    state={messages:
        [
            {id:"1",title:"message001",href:"/message1"},
            {id:"2",title:"message002",href:"/message2"},
            {id:"3",title:"message003",href:"/message3"}
        ]
    }
    render() {
        const {messages}=this.state
        return (
          <div>
            <ul> 
            {
              messages.map((msgObj)=>{
                 return  (
                 <li key={msgObj.id}> 
                     {/* <a href={msgObj.id}>{msgObj.title}</a>&nbsp;&nbsp;  */}
                     {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> */}
                     {/* 默认都是往history中push，可以更改为replace模式，history属于栈的结构 */}
                     <Link replace={true} to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                 </li>) 
              })  
            }
          </ul>
          <Switch>
          <Route  path="/home/message/detail" component={Detail}/>
          </Switch>
          </div>
        );
    }
}

